<template>
  <div style="margin:0 auto;width:80%;height:100%;border:1px solid #000">
    <div style="margin:0 auto;width: 50%;">
        <Goban
        :max-width="maxSize"
        :max-height="maxSize"
        :animate="true"
        :busy="isBusy"
        :range-x="showCorner ? [8, 18] : undefined"
        :range-y="showCorner ? [12, 18] : undefined"
        :coord-x="coordX"
        :coord-y="coordY"
        :sign-map="signMap"
        :show-coordinates="true"
        :fuzzy-stone-placement="fuzzyStonePlacement"
        :animate-stone-placement="animateStonePlacement"
        :paint-map="showPaintMap ? paintMap : undefined"
        :heat-map="showHeatMap ? heatMap : undefined"
        :marker-map="showMarkerMap ? markerMap : undefined"
        :ghost-stone-map="showGhostStones ? ghostStoneMap : undefined"
        :lines="showLines ? [
            {type: 'line', v1: [15, 6], v2: [12, 15]},
            {type: 'arrow', v1: [10, 4], v2: [5, 7]}
        ] : []"
        :dimmed-map="showDimmedStones ? dimmedMap : []"
        :selected-map="showSelection ? selectedMap : []"
        @click="onVertexClick"
        />
    </div>
  </div>
</template>

<script>
import Goban from '@/components/Goban.vue';

const coordX = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S'];
const coordY = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19'];

const rawSignMap = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];/* 棋局 矩阵 */

const paintMap = [];/* 棋局 矩阵 */

const heatMap = [];

const markerMap = [];

const ghostStoneMap = [];

const dimmedMap = [];

const selectedMap = [];

export default {
  name: 'home',
  components: {
      Goban
  },
  data: function () {
      return {
          signMap: JSON.parse(JSON.stringify(rawSignMap)),
          maxSize: 580,
          showCoordinates: false,
          alternateCoordinates: true,
          showCorner: false,
          showDimmedStones: false,
          fuzzyStonePlacement: false,
          animateStonePlacement: false,
          showPaintMap: false,
          showHeatMap: false,
          showMarkerMap: false,
          showGhostStones: false,
          showLines: false,
          showSelection: false,
          isBusy: false,
  
          rawSignMap,
          coordX,
          coordY,
          paintMap,
          heatMap,
          markerMap,
          ghostStoneMap,
          dimmedMap,
          selectedMap,
          checkedNames: []
      };
  },
  
  methods: {
      onVertexClick: function (offset) {
          let signMap = JSON.parse(JSON.stringify(this.signMap));
          signMap[offset] = Math.sign(Math.random() - 0.5) || 1;
          this.signMap = signMap;
      }
  }
}
</script>

<style>
body {
    font-family: "Segoe UI", Ubuntu, Helvetica, Arial, sans-serif;
}
</style>
